<template>
	<div class="login_wp">
		<div class="login_pop">
			<div class="con">
				<img class="top_pic" src="../../static/images/logo.png" alt="">
				<div class="login_con">
					<p>柏杨联盟后台管理系统</p>
					<input type="text" class="login_name" v-model="username" placeholder="请输入用户名">
					<input type="password" class="login_pass" v-model="password" placeholder="请输入密码">
					<div class="item" style="position: relative;">
						<input type="text" class="login_pass" v-model="codetxt" placeholder="请输入验证码">
						<div class="code" @click="draw">
							<canvas id="canvas" canvas-id="canvas" class="canvas"></canvas>
						</div>
					</div>


					<span class="login_butt" @click="Login()">登录</span>
				</div>

			</div>
			<!-- <div class="login_food">
				<p><a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2023004579号</a></p>
			</div> -->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				codetxt: '',
				code: [],
			}
		},
		onLoad() {

		},
		onReady() {
			this.draw();
		},
		methods: {
			Login: function() {
				let that = this;
				if (that.username == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名',
						duration: 2000
					});
				} else if (that.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 2000
					});
				} else if (that.codetxt == '') {

					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					});
				} else if (that.codetxt.toLowerCase() != that.code.join("")) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确',
						duration: 2000
					});

					that.codetxt = '';
					that.draw();
				} else {
					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					let _data = {
						username: that.username,
						password: that.password
					};
					that.common.http('POST', 'login', _data, function(res) {
						uni.hideLoading();
						console.log(res)
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '登录成功',
								duration: 2000
							});
							uni.setStorage({
								key: 'bytoken',
								data: res.data.token,
								success: function() {
									console.log('success');
								}
							});
							uni.setStorage({
								key: 'bytokentime',
								data: new Date(),
								success: function() {
									console.log('success');
								}
							});
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/index/index',
								})
							}, 1500);
						}
					});
				}
			},

			draw: function() {
				const show_num = [];
				const that = this;
				const canvas_width = 128;
				const canvas_height = 54;
				const canvas = uni.createCanvasContext('canvas', this);
				const sCode = "1,2,3,4,5,6,7,8,9,0";
				const aCode = sCode.split(",");
				const aLength = aCode.length;	
				

				for (let i = 0; i <= 3; i++) {
					const j = Math.floor(Math.random() * aLength);
					const deg = Math.random() * 30 * Math.PI / 180;
					const txt = aCode[j];
					that.code[i] = txt.toLowerCase();
					const x = 30 + i * 20;
					const y = 20 + Math.random() * 8;
					canvas.setFontSize(23);
					canvas.setFillStyle(this.randomColor());
					canvas.fillText(txt, x, y);
				}
				for (let i = 0; i <= 5; i++) {
					canvas.setStrokeStyle(this.randomColor());
					canvas.beginPath();
					canvas.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					canvas.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					canvas.stroke();
				}
				for (let i = 0; i <= 30; i++) {
					canvas.setStrokeStyle(this.randomColor());
					canvas.beginPath();
					const x = Math.random() * canvas_width;
					const y = Math.random() * canvas_height;
					canvas.moveTo(x, y);
					canvas.lineTo(x + 1, y + 1);
					canvas.stroke();
				}
				canvas.draw();
			},

			randomColor: function() { //得到随机的颜色值
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}


		}
	}
</script>

<style scoped>
	.code{position: absolute;right: 0;top: 0;width: 128px;height: 100%;}
.code canvas{width: 128px;height: 40px;}
</style>